<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :maskClosable="false"
    :forceRender="true"
    :style="modalStyle"
    fullscreen
    switchFullscreen
    @cancel="handleCancel"
    wrapClassName="ant-modal-cust-warp"
  >
    <template slot="footer">
      <a-button key="back" @click="handleCancel">取消(ESC)</a-button>
      <!--此处为解决缓存问题-->
      <!-- <a-button v-if="financialType === '收预付款'" v-print="'#advanceInPrint'">打印</a-button>
      <a-button v-if="financialType === '转账'" v-print="'#giroPrint'">打印</a-button>
      <a-button v-if="financialType === '收入'" v-print="'#itemInPrint'">打印</a-button>
      <a-button v-if="financialType === '支出'" v-print="'#itemOutPrint'">打印</a-button>
      <a-button v-if="financialType === '收款'" v-print="'#moneyInPrint'">打印</a-button>
      <a-button v-if="financialType === '付款'" v-print="'#moneyOutPrint'">打印</a-button> -->
      <!--反审核-->
      <a-button v-if="checkFlag && isCanBackCheck && model.status === '1'" @click="handleBackCheck()">反审核</a-button>
    </template>
    <a-form :form="form">
      <!--收预付款-->
      <template v-if="financialType === '收预付款'">
        <section ref="print" id="advanceInPrint">
          <a-row class="form-row" :gutter="24">
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="付款会员">
                <a-input v-decorator="['id']" hidden />
                {{ model.organName }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="财务人员">
                {{ model.handsPersonName }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期">
                {{ model.billTimeStr }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号">
                {{ model.billNo }}
              </a-form-item>
            </a-col>
          </a-row>
          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :pagination="false"
            :loading="loading"
            :columns="advanceInColumns"
            :dataSource="dataSource"
          >
          </a-table>
          <a-row class="form-row" :gutter="24">
            <a-col :lg="24" :md="24" :sm="24">
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="{ xs: { span: 24 }, sm: { span: 24 } }"
                label=""
                style="padding: 20px 10px"
              >
                {{ model.remark }}
              </a-form-item>
            </a-col>
          </a-row>
          <a-row class="form-row" :gutter="24">
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="合计金额">
                {{ model.totalPrice }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="收款金额">
                {{ model.changeAmount }}
              </a-form-item>
            </a-col>
            <a-col :span="6"></a-col>
            <a-col :span="6"></a-col>
            <a-col :span="6"></a-col>
          </a-row>
        </section>
      </template>
      <!--转账-->
      <template v-if="financialType === '转账'">
        <section ref="print" id="giroPrint">
          <a-row class="form-row" :gutter="24">
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="财务人员">
                <a-input v-decorator="['id']" hidden />
                {{ model.handsPersonName }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期">
                {{ model.billTimeStr }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号">
                {{ model.billNo }}
              </a-form-item>
            </a-col>
            <a-col :span="6"></a-col>
          </a-row>
          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :pagination="false"
            :loading="loading"
            :columns="giroColumns"
            :dataSource="dataSource"
          >
          </a-table>
          <a-row class="form-row" :gutter="24">
            <a-col :lg="24" :md="24" :sm="24">
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="{ xs: { span: 24 }, sm: { span: 24 } }"
                label=""
                style="padding: 20px 10px"
              >
                {{ model.remark }}
              </a-form-item>
            </a-col>
          </a-row>
          <a-row class="form-row" :gutter="24">
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="付款账户">
                {{ model.accountName }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="实付金额">
                {{ model.changeAmount }}
              </a-form-item>
            </a-col>
            <a-col :span="6"></a-col>
            <a-col :span="6"></a-col>
          </a-row>
        </section>
      </template>
      <!--收入-->
      <template v-if="financialType === '收入'">
        <section ref="print" id="itemInPrint">
          <a-row class="form-row" :gutter="24">
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="往来单位">
                <a-input v-decorator="['id']" hidden />
                {{ model.customerName }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="操作员">
                {{ model.salespersonName }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期">
                {{ model.orderDate }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号">
                {{ model.orderNo }}
              </a-form-item>
            </a-col>
          </a-row>
          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :pagination="false"
            :loading="loading"
            :columns="itemInColumns"
            :dataSource="dataSource"
          >
          </a-table>
          <a-row class="form-row" :gutter="24">
            <a-col :lg="24" :md="24" :sm="24">
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="{ xs: { span: 24 }, sm: { span: 24 } }"
                label=""
                style="padding: 20px 10px"
              >
                {{ model.remark }}
              </a-form-item>
            </a-col>
          </a-row>
          <a-row class="form-row" :gutter="24">
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="收入账户">
                {{ model.settlementAccountName }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="收入金额">
                {{ model.receiptAmount }}
              </a-form-item>
            </a-col>
             <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="已收入金额">
                {{ model.amountReceived }}
              </a-form-item>
            </a-col>
            <a-col :span="6"></a-col>
            <a-col :span="6"></a-col>
          </a-row>
        </section>
      </template>
      <!--支出-->
      <template v-if="financialType === '支出'">
        <section ref="print" id="itemOutPrint">
          <a-row class="form-row" :gutter="24">
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="往来单位">
                <a-input v-decorator="['id']" hidden />
                {{ model.supplierName }}
              </a-form-item>
            </a-col>
           <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="操作员">
                {{ model.salespersonName }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期">
                {{ model.orderDate }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号">
                {{ model.orderNo }}
              </a-form-item>
            </a-col>
          </a-row>
          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :pagination="false"
            :loading="loading"
            :columns="itemOutColumns"
            :dataSource="dataSource"
          >
          </a-table>
          <a-row class="form-row" :gutter="24">
            <a-col :lg="24" :md="24" :sm="24">
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="{ xs: { span: 24 }, sm: { span: 24 } }"
                label=""
                style="padding: 20px 10px"
              >
                {{ model.remark }}
              </a-form-item>
            </a-col>
          </a-row>
          <a-row class="form-row" :gutter="24">
           <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="支出账户">
                {{ model.settlementAccountName }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="支出金额">
                {{ model.receiptAmount }}
              </a-form-item>
            </a-col>
             <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="已支出金额">
                {{ model.amountReceived }}
              </a-form-item>
            </a-col>
            <a-col :span="6"></a-col>
            <a-col :span="6"></a-col>
          </a-row>
        </section>
      </template>
      <!--收款-->
      <template v-if="financialType === '收款'">
        <section ref="print" id="moneyInPrint">
          <a-row class="form-row" :gutter="24">
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="客户">
                <a-input v-decorator="['id']" hidden />
                {{ model.organName }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="财务人员">
                {{ model.handsPersonName }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期">
                {{ model.billTimeStr }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号">
                {{ model.billNo }}
              </a-form-item>
            </a-col>
          </a-row>
          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :pagination="false"
            :loading="loading"
            :columns="moneyInColumns"
            :dataSource="dataSource"
          >
          </a-table>
          <a-row class="form-row" :gutter="24">
            <a-col :lg="24" :md="24" :sm="24">
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="{ xs: { span: 24 }, sm: { span: 24 } }"
                label=""
                style="padding: 20px 10px"
              >
                {{ model.remark }}
              </a-form-item>
            </a-col>
          </a-row>
          <a-row class="form-row" :gutter="24">
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="收款账户">
                {{ model.accountName }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="合计收款">
                {{ model.totalPrice }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="优惠金额">
                {{ model.discountMoney }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="实际收款">
                {{ model.changeAmount }}
              </a-form-item>
            </a-col>
          </a-row>
        </section>
      </template>
      <!--付款-->
      <template v-if="financialType === '付款'">
        <section ref="print" id="moneyOutPrint">
          <a-row class="form-row" :gutter="24">
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="供应商">
                <a-input v-decorator="['id']" hidden />
                {{ model.organName }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="财务人员">
                {{ model.handsPersonName }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期">
                {{ model.billTimeStr }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号">
                {{ model.billNo }}
              </a-form-item>
            </a-col>
          </a-row>
          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :pagination="false"
            :loading="loading"
            :columns="moneyOutColumns"
            :dataSource="dataSource"
          >
          </a-table>
          <a-row class="form-row" :gutter="24">
            <a-col :lg="24" :md="24" :sm="24">
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="{ xs: { span: 24 }, sm: { span: 24 } }"
                label=""
                style="padding: 20px 10px"
              >
                {{ model.remark }}
              </a-form-item>
            </a-col>
          </a-row>
          <a-row class="form-row" :gutter="24">
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="付款账户">
                {{ model.accountName }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="合计付款">
                {{ model.totalPrice }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="优惠金额">
                {{ model.discountMoney }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="实际付款">
                {{ model.changeAmount }}
              </a-form-item>
            </a-col>
          </a-row>
        </section>
      </template>
      <template v-if="fileList && fileList.length > 0">
        <a-row class="form-row" :gutter="24">
          <a-col :span="12">
            <a-form-item
              :labelCol="{ xs: { span: 24 }, sm: { span: 3 } }"
              :wrapperCol="{ xs: { span: 24 }, sm: { span: 21 } }"
              label="附件"
            >
              <j-upload v-model="fileList" bizPath="bill" :disabled="true" :buttonVisible="false"></j-upload>
            </a-form-item>
          </a-col>
          <a-col :span="12"></a-col>
        </a-row>
      </template>
    </a-form>
  </j-modal>
</template>
<script>
import pick from 'lodash.pick'
import { getAction, postAction } from '@/api/manage'
import { findFinancialDetailByNumber, getCurrentSystemConfig } from '@/api/api'
import { getCheckFlag } from '@/utils/util'
import JUpload from '@/components/jeecg/JUpload'

export default {
  name: 'FinancialDetail',
  components: {
    JUpload,
  },
  data() {
    return {
      title: '详情',
      width: '1600px',
      visible: false,
      modalStyle: '',
      model: {},
      isCanBackCheck: true,
      financialType: '',
      fileList: [],
      /* 原始反审核是否开启 */
      checkFlag: true,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      form: this.$form.createForm(this),
      loading: false,
      dataSource: [],
      url: {
        detailList: '/accountItem/getDetailList',
        batchSetStatusUrl: '/accountHead/batchSetStatus',
      },
      advanceInColumns: [
        {
          title: '#',
          dataIndex: '',
          width: '5%',
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        { title: '账户名称', dataIndex: 'accountName', width: '30%' },
        { title: '金额', dataIndex: 'eachAmount', width: '30%' },
        { title: '备注', dataIndex: 'remark', width: '30%' },
      ],
      giroColumns: [
        {
          title: '#',
          dataIndex: '',
          width: '5%',
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        { title: '账户名称', dataIndex: 'accountName', width: '30%' },
        { title: '金额', dataIndex: 'eachAmount', width: '30%' },
        { title: '备注', dataIndex: 'remark', width: '30%' },
      ],
      itemInColumns: [
        {
          title: '#',
          dataIndex: '',
          width: '5%',
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        { title: '业务类型', dataIndex: 'incomeCategory', width: '30%' },
        { title: '金额', dataIndex: 'amount', width: '30%' },
        { title: '备注', dataIndex: 'remark', width: '30%' },
      ],
      itemOutColumns: [
        {
          title: '#',
          dataIndex: '',
          width: '5%',
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        { title: '支出项目', dataIndex: 'inOutItemName', width: '30%' },
        { title: '金额', dataIndex: 'eachAmount', width: '30%' },
        { title: '备注', dataIndex: 'remark', width: '30%' },
      ],
      moneyInColumns: [
        {
          title: '#',
          dataIndex: '',
          width: '5%',
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        { title: '销售单据编号', dataIndex: 'billNumber', width: '20%' },
        { title: '应收欠款', dataIndex: 'needDebt', width: '10%' },
        { title: '已收欠款', dataIndex: 'finishDebt', width: '10%' },
        { title: '本次收款', dataIndex: 'eachAmount', width: '10%' },
        { title: '备注', dataIndex: 'remark', width: '20%' },
      ],
      moneyOutColumns: [
        {
          title: '#',
          dataIndex: '',
          width: '5%',
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        { title: '采购单据编号', dataIndex: 'billNumber', width: '20%' },
        { title: '应付欠款', dataIndex: 'needDebt', width: '10%' },
        { title: '已付欠款', dataIndex: 'finishDebt', width: '10%' },
        { title: '本次付款', dataIndex: 'eachAmount', width: '10%' },
        { title: '备注', dataIndex: 'remark', width: '20%' },
      ],
    }
  },
  created() {
    let realScreenWidth = window.screen.width
    this.width = realScreenWidth < 1500 ? '1200px' : '1550px'
  },
  methods: {
    show(record, type, prefixNo) {
      this.prefixNo = prefixNo
      this.financialType = type
      this.visible = true
      this.modalStyle = 'top:20px;height: 95%;'
      this.model = Object.assign({}, record)
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'id'))
      })
      if (record.incomeDetailVOList) {
        this.dataSource = record.incomeDetailVOList
      }
      // //查询单条财务信息
      // findFinancialDetailByNumber({ billNo: record.billNo }).then((res) => {
      //   if (res && res.code === 200) {
      //     let item = res.data
      //     //附件下载
      //     this.fileList = item.fileName
      //     let params = {
      //       headerId: this.model.id,
      //     }
      //     let url = this.readOnly ? this.url.detailList : this.url.detailList;
      //     this.requestSubTableData(url, params);
      //     this.getSystemConfig()
      //   }
      // })
    },
    requestSubTableData(url, params, success) {
      this.loading = true
      getAction(url, params)
        .then((res) => {
          if (res && res.code === 200) {
            this.dataSource = res.data.rows
            typeof success === 'function' ? success(res) : ''
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    getSystemConfig() {
      getCurrentSystemConfig().then((res) => {
        if (res.code === 200 && res.data) {
          let multiBillType = res.data.multiBillType
          let multiLevelApprovalFlag = res.data.multiLevelApprovalFlag
          this.checkFlag = getCheckFlag(multiBillType, multiLevelApprovalFlag, this.prefixNo)
        }
      })
    },
    handleBackCheck() {
      let that = this
      this.$confirm({
        title: '确认操作',
        content: '是否对该单据进行反审核?',
        onOk: function () {
          that.loading = true
          postAction(that.url.batchSetStatusUrl, { status: '0', ids: that.model.id })
            .then((res) => {
              if (res.code === 200) {
                that.$emit('ok')
                that.loading = false
                that.close()
              } else {
                that.$message.warning(res.msg)
                that.loading = false
              }
            })
            .finally(() => {})
        },
      })
    },
    handleCancel() {
      this.close()
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.modalStyle = ''
    },
  },
}
</script>

<style scoped>
</style>